/**
 * 新闻咨询
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">报表查询</el-breadcrumb-item>
      <el-breadcrumb-item>入库明细</el-breadcrumb-item>
    </el-breadcrumb>

    <span>
      供应商：<el-select v-model="editForm.productType" placeholder="" style="margin-top:20px;margin-right:15px;width:150px">
        <el-option
          v-for="item in brandOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value" -->
        ></el-option>
      </el-select>
        仓库：<el-select v-model="editForm.productType" placeholder="" style="margin-top:20px;margin-right:15px;width:150px">
         <el-option
          v-for="item in brandOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select> 
      商品信息:
      <el-input
        v-model="editForm.productType"
        placeholder="条码、名称、规格、型号"
        style="width:190px; margin-top:20px;margin-right:15px "
      ></el-input>
      单据日期：<el-date-picker
        v-model="editForm.productType"
        type="date"
        placeholder="请选择时间"
        style="width:180px"
      ></el-date-picker>
      <el-button type="primary" style="margin-left: 10px">查询</el-button>
      <el-button type="primary" style="margin-left: 5px">打印</el-button>
    </span>
    <!-- 搜索筛选 -->
    <el-form :inline="true" class="user-search">
      <el-form-item>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-plus"
          @click="handleAdd()"
          >新增</el-button
        >
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table
      size="small"
      :data="listData"
      highlight-current-row
      v-loading="loading"
      border
      element-loading-text="拼命加载中"
      style="width: 100%"
    >
      <el-table-column sortable align="center" prop="id" label="单据编号">
      </el-table-column>
      <el-table-column sortable align="center" prop="name" label="条码">
      </el-table-column>
      <el-table-column sortable align="center" label="名称 ">
        <template slot-scope="scope"
          ><img style="height: 80px" :src="scope.row.coverPhoto[0]"
        /></template>
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="createTime"
        label="规格"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="型号"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="单位"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="数量"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="单价"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="金额"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="供应商"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="仓库"
      >
      </el-table-column>
      <el-table-column
        sortable
        align="center"
        prop="updateTime"
        label="入库日期"
      >
      </el-table-column>
      <el-table-column align="center" label="备注" min-width="70">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleUpdate(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="deleteUser(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      layout="total, sizes,prev, pager, next,jumper"
      :current-page.sync="list.pageNum"
      :page-size="list.pageSize"
      :total="total"
    >
    </el-pagination>
    <!-- 编辑界面 -->
    <el-dialog
      :title="isEdit ? '编辑' : '添加'"
      :visible.sync="editFormVisible"
      width="30%"
      @click="closeDialog"
    >
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-form-item label="类型">
          <el-input
            size="small"
            v-model="editForm.type"
            auto-complete="off"
            placeholder="请输入类型"
          ></el-input>
        </el-form-item>
        <el-form-item label="标题文字">
          <el-input
            size="small"
            v-model="editForm.name"
            auto-complete="off"
            placeholder="请输入标题文字"
          ></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            action="#"
            accept=".jpg"
            list-type="picture-card"
            :file-list="fileList"
            :http-request="upload"
            :on-change="handlePicChange"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :beforeUpload="beforeUpload_image"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible" :append-to-body="true">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-date-picker
            v-model="editForm.createTime"
            type="date"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="修改时间：">
          <el-date-picker
            v-model="editForm.updateTime"
            type="date"
            placeholder="请选择时间"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="内容：">
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="handleDialogConfirm()"
          >保存</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getNews,
  save,
  deletes,
  updateOrg,
  getList,
} from "../../api/systemUser";

var COS = require("cos-js-sdk-v5");

var myBucket = "mseb-1301879582";
var myRegion = "ap-beijing";
var mySecretId = "AKIDToxsY0DCwRlriKitpX0EDxSikY9WeYDi";
var mySecretKey = "MUO2TggRxFJ8k8HDxSkpgIgpjPs8AxVo";

// 初始化实例
var cos = new COS({
  SecretId: mySecretId,
  SecretKey: mySecretKey,
  FileParallelLimit: "3",
  ChunkParallelLimit: "3",
});
const defaultEditForm = {
  id: null,
  type: 1,
  name: null,
  coverPhoto: null,
  createTime: null,
  updateTime: null,
  content: ""
};
const defaultListQuery = {
  pageNum: 1,
  pageSize: 10,
  isAsc: false,
  orderByField: "create_time",
  type: 1, //1新闻咨询2行业动态
};
export default {
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      isEdit: false,
      total: "",
      editForm: Object.assign({}, defaultEditForm),
      listData: [], //用户数据
      list: Object.assign({}, defaultListQuery),
      dialogImageUrl: "",
      dialogVisible: false,
      image: "",
      imgUid: null,
      fileList: [],
      file: []
    };
  },
  components: {
  },

  /**
   * 创建完毕
   */
  created() {
    this.getdata();
  },
  beforeDestroy() {
    // 销毁组件前销毁编辑器
  },
  methods: {
    handleSizeChange(val) {
      this.list.pageNum = 1;
      this.list.pageSize = val;
      this.getdata();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.list.pageNum = val;
      this.getdata();
    },
    // 获取列表
    getdata() {
      // this.loading = true;
      getNews(this.list)
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.$message({
              type: "info",
              message: res.message,
            });
          } else {
            this.listData = res.data.rows;
            this.total = res.data.total;
            this.list.pageNum = res.data.pages;
            this.listData.map((item) => {
              item.coverPhoto = item.coverPhoto.split(",");
              return item.coverPhoto;
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error("菜单加载失败，请稍后再试！");
        });
    },
    // 添加
    handleAdd() {
      this.editFormVisible = true;
      this.isEdit = false;
      setTimeout(() => {
        this.editForm = Object.assign({}, defaultEditForm);
      }, 100);
      this.fileList = [];
      this.file = [];
    },
    //显示编辑界面
    handleUpdate(index, row) {
      this.editFormVisible = true;
      this.isEdit = true;
      getList(row.id).then((res) => {
        if (res.code == 0) {
          this.$message({
            type: "info",
            message: res.message,
          });
        } else {
          this.editForm = res.data;
          if (this.editForm.coverPhoto.split(",").length >= 2) {
            let urlArray = this.editForm.coverPhoto.split(",");
            let newUrlArray = urlArray.map((item, index) => {
              return {
                name: index,
                url: item,
              };
            });
            this.fileList = newUrlArray;
            this.file = this.editForm.coverPhoto.split(",");
          } else {
            this.fileList = [
              { name: "xxx", url: this.editForm.coverPhoto },
            ];
          }
        }
      });
    },

    // 编辑、增加页面保存方法
    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (this.isEdit) {
          this.editForm.coverPhoto = this.file;
          updateOrg(this.editForm).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "修改成功！",
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "info",
              });
            }
            this.editFormVisible = false;
            this.loading = false;
            this.getdata();
          });
        } else {
          this.editForm.coverPhoto = this.file;
          save(this.editForm).then((res) => {
            if (res.code == 1) {
              this.$message({
                message: "添加成功！",
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "info",
              });
            }
            this.editFormVisible = false;
            this.loading = false;
            this.getdata();
          });
        }
      });
    },
    // 删除
    deleteUser(index, row) {
      this.$confirm("确定要删除吗?", "信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          deletes(row.id)
            .then((res) => {
              if (res.code == 1) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
                this.getdata();
              } else {
                this.$message({
                  type: "info",
                  message: res.msg,
                });
              }
            })
            .catch((err) => {
              this.loading = false;
              this.$message.error("删除失败，请稍后再试！");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false;
    },
    beforeUpload_image(image) {
      this.image = image;
    },
    upload() {
      this.imgUid = this.image.uid;
      var folder = "images/";
      // 上传图片
      cos.putObject(
        {
          Bucket: myBucket /* 必须 */,
          Region: myRegion /* 存储桶所在地域，必须字段 */,
          Key: "images/" + this.image.name, //COS中的路径
          Body: this.image, // 上传文件对象
          onProgress: function (progressData) {
            // console.log(JSON.stringify(progressData.Location));
          },
        },
        (err, data) => {
          if (err) return;
          this.file.push("http://" + data.Location);
        }
      );
    },
    handleRemove(file, fileList) {
      this.file.splice(this.file.indexOf(file.url), 1);
    },
    handlePictureCardPreview(file) {
      console.log(file);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePicChange(file, fileList) {
      this.fileList = fileList;
    },
  },
};
</script>
<style >
.el-dialog {
  width: 40% !important;
}
.el-input--small .el-input__inner {
  width: 70%;
}
.bth {
  float: right;
  margin-top: -30px;
  margin-left: -30px;
}

</style>
<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

 
 